<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">绩效当日详情</view>
		</cu-custom>
		<view :style="{minHeight: height - CustomBar + 'px'}" :class="[BackGroundBox]">
			<view>
				<view>
					<view class="text-center fontxl">安徽巢湖华锦纺织</view>
					<view class="flex padding justify-center">
						<view class="text-center fontxs">作业单</view>
					</view>
				</view>
			</view>
			<view class="cu-bar solid-bottom" v-if="isShow">
				<view class="action">
					<text class="cuIcon-title">上班</text>
				</view>
			</view>
			<block v-for="(item,index) in deliverplan" :key="index">
				<view style="position: relative;" v-if="item.LWORKTYPE == 0">
					<image :style="{height:scrollH + 30 + 'px',width:100 + '%'}" src="/static/images/tablebj.png" mode="aspctFill"></image>
					<view style="position: absolute;top: 0;left: 0;width: 100%;padding: 30rpx;">
						<t-table>
							<t-tr>
								<t-th>机器号</t-th>
								<t-th class="text-bold text-red">{{item.LMACHINENO}}</t-th>
								<t-th>机器规格</t-th>
								<t-th class="text-bold text-red">{{item.LMACHINETYPE}}</t-th>
							</t-tr>
							<t-tr>
								<t-th>车间</t-th>
								<t-th class="text-bold text-red">{{item.LCLASSINDEX}}</t-th>
								<t-th>工序</t-th>
								<t-th class="text-bold text-red">{{item.LTYPE}}</t-th>
							</t-tr>
							<t-tr>
								<t-th class="fontxs text-red">当前产量</t-th>
								<t-th class="text-bold text-red fontxs">{{item.LWEIGHT}}</t-th>
							</t-tr>
							<t-tr>
								<t-th>上机人</t-th>
								<t-th class="text-bold text-red">{{item.LUSERNAME}}</t-th>
								<t-th>上机时间</t-th>
								<t-th class="text-bold text-red">{{item.LTIME}}</t-th>
							</t-tr>
						</t-table>
					</view>
				</view>
			</block>
			<view class="cu-bar solid-bottom" v-if="isShow">
				<view class="action">
					<text class="cuIcon-title">下班</text>
				</view>
			</view>
			<block v-for="(item,index1) in deliverplan" :key="index1">
				<view style="position: relative;" v-if="item.LWORKTYPE == 1">
					<image :style="{height:scrollH + 30 + 'px',width:100 + '%'}" src="/static/images/tablebj.png" mode="aspctFill"></image>
					<view style="position: absolute;top: 0;left: 0;width: 100%;padding: 30rpx;">
						<t-table>
							<t-tr>
								<t-th>机器号</t-th>
								<t-th class="text-bold text-red">{{item.LMACHINENO}}</t-th>
								<t-th>机器规格</t-th>
								<t-th class="text-bold text-red">{{item.LMACHINETYPE}}</t-th>
							</t-tr>
							<t-tr>
								<t-th>车间</t-th>
								<t-th class="text-bold text-red">{{item.LCLASSINDEX}}</t-th>
								<t-th>工序</t-th>
								<t-th class="text-bold text-red">{{item.LTYPE}}</t-th>
							</t-tr>
							<t-tr>
								<t-th class="fontxs text-red">当前产量</t-th>
								<t-th class="text-bold text-red fontxs">{{item.LWEIGHT}}</t-th>
							</t-tr>
							<t-tr>
								<t-th>下机人</t-th>
								<t-th class="text-bold text-red">{{item.LUSERNAME}}</t-th>
								<t-th>下机时间</t-th>
								<t-th class="text-bold text-red">{{item.LTIME}}</t-th>
							</t-tr>
						</t-table>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		getchievements
	} from "@/service/selectList.js"
	import utils from '@/static/js/utils.filter.js';
	import tTable from '@/colorui/components/t-table/t-table.vue';
	import tTh from '@/colorui/components/t-table/t-th.vue';
	import tTr from '@/colorui/components/t-table/t-tr.vue';
	import tTd from '@/colorui/components/t-table/t-td.vue';
	export default {
		data() {
			return {
				height: this.screenHeight,
				CustomBar: uni.upx2px(this.CustomBar),
				dateright: global.dateright,
				userinfo: global.userinfo,
				scrollH: uni.upx2px(442),
				isShow: false,
				deliverplan: []
			}
		},
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		computed: {
			...mapGetters(["Style", 'Font', 'BackGround', 'BackGroundBox'])
		},
		onReady() {

		},
		onLoad(options) {
			getchievements(global.userinfo.lusercode, '2020', options.yue, options.day, 2).then(res => {
				if (res.code == 1) {
					if (res.data.length == 0) {
						this.isShow = false
						uni.showToast({
							title: '上下机空',
							icon: 'none'
						})
					} else {
						for (let item of res.data) {
							var thisTime = item.LTIME.replace("T", " ").substring(0, 19).replace(/-/g, '/');
							item.LTIME = utils.timeTodate('Y/m/d H:i:s', new Date(thisTime).getTime() + 8 * 3600 * 1000)
						}
						this.deliverplan = res.data
						this.isShow = true
						// this.$nextTick(() => {
						// 	const query = uni.createSelectorQuery().in(this);
						// 	query.select('.t-table').boundingClientRect(data => {
						// 		console.log(data);
						// 		this.scrollH = uni.upx2px(442) 
						// 		this.isShow = true
						// 	}).exec();
						// })
					}
				} else {
					uni.showToast({
						title:'获取数据失败！',
						icon:'none'
					})
					this.isShow = false
				}
			})
		},
		methods: {

		}
	}
</script>


<style lang="scss" scoped>
	.fontxl {
		font-size: 60rpx;
	}

	.fontxs {
		font-size: 50rpx;
	}

	.image {
		width: 100rpx;
		height: 100rpx;
	}

	.fixed2 {

		padding-bottom: 50rpx;
	}

	.image2 {
		width: 180rpx;
		height: 180rpx;
	}

	.grid {
		justify-content: center;
	}
</style>
